
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="assets/ico/favicon.ico" type="image/x-icon" />
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/jquery.mmenu.css" rel="stylesheet">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/plugins/jquery-ui/css/jquery-ui-1.10.4.min.css" rel="stylesheet">
    <link href="assets/css/style.min.css" rel="stylesheet">
    <link href="assets/css/add-ons.min.css" rel="stylesheet">
    <title>预约维修管理</title>
</head>
<style type="text/css">
    #a{
        text-decoration:none;
    }
</style>
<body>
<div class="row">
    <div class="col-lg-10">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2><i class="fa fa-table red"></i><span class="break"></span><strong>预约信息</strong></h2>
            </div>
            <div class="panel-body">
                <form id="myForm" action="/uplAppointment" method="post">
                    `    <table class="table">
                    <thead>
                    <colgroup>
                        <col width="27%">
                        <col width="73%">
                    </colgroup>
                    </thead>
                    <tr align="left">
                        <td colspan="2"><b>请填写修改信息</b></td>
                        <td><input type="hidden" name="makeanappointmentaccept"/></td>
                    </tr>
                    <tr><td>预约编号</td><td><input type="text" name="makeanappointmentid" readonly="readonly" id="Id"/></td></tr>
                    <tr><td>预约人姓名</td><td><input type="text" name="makeanappointmentname" id="name"/></td></tr>
                    <tr><td>预约人性别</td><td><input type="radio" name="makeanappointmentsex" id="boy" checked="checked" value="0"/>男&nbsp;&nbsp;
                        <input type="radio" name="makeanappointmentsex" id="girl" value="1"/>女</td></tr>
                    <tr><td>车的品牌</td><td><input type="text" name="makeanappointmentbrand" id="brand"/></td></tr>
                    <tr><td>服务类型</td><td>
                        <select name="servicetype.servicetypeid" id="type">
                            <!--<option></option>-->
                        </select>
                    </td></tr>
                    <tr><td>车牌号</td><td><input type="text" name="makeanappointmentcarno" id="carNo"/></td></tr>
                    <tr><td>预约的时间</td><td><input type="text" name="makeanappointmenttime" id="time"/></td></tr>
                    <tr><td>电话号码</td><td><input type="text" name="makeanappointmentphone" id="phone"/></td></tr>
                    <tr align="center">
                        <td colspan='2'><input type='submit' class='update' value='修改'/>
                            <a href="/admin/makeanappointment.html"><input type='button'value='返回'/></a>
                        </td>
                    </tr>
                    <tbody id="TableData" class="datas">
                    </tbody>
                </table>
                </form>
                <div id="TableTail" align="center">
                </div>
            </div>
        </div>
    </div><!--/col-->

</div><!--/row-->
</body>
<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("input[type=text]").css("width","275px");
        $("select").css("width","275px");
        var s=location.search;
        var Id= s.substring(s.indexOf("=")+1,s.length);
        $(".datas").empty();
        $("#TableTail").empty();
        getData();
        say(Id);
    });
    // // 修改
    // $(".update").bind("click",function () {
    //     $.ajax({
    //         url:"/uplAppointment", //提交的地址
    //         type: "post",   //提交的方法
    //         data:$('#myForm').serialize(),// 序列化表单值
    //         async: false,
    //         success: function(data) {  //成功
    //             // // $("#TableData").append("<tr align='center'><td colspan='2'><span>"+data+"</span></td></tr>")
    //             // say(servicetypeid);
    //             $(location).prop('href', '../makeanappointment.html');
    //         }
    //     });
    // });
    //单条预约记录
    function say(Id) {
        $.ajax({
            url:"/queryAppointmentById",
            data:{"makeanappointmentid":Id},
            type:"post",
            dataType:"json",
            success:function (data) {
                if(data){
                    $("input[name=makeanappointmentid]").val(data.makeanappointmentid);
                    $("input[name=makeanappointmentname]").val(data.makeanappointmentname);
                    $("input[name=makeanappointmentcarno]").val(data.makeanappointmentcarno);
                    $("input[name=makeanappointmentphone]").val(data.makeanappointmentphone);
                    $("input[name=makeanappointmentbrand]").val(data.makeanappointmentbrand);
                    $("select").val(data.servicetype.servicetypeid)
                    $("input[name=makeanappointmenttime]").val(data.makeanappointmenttime);
                    $("input[type=hidden]").val(data.makeanappointmentaccept);

                    if(data.makeanappointmentsex==0){
                        $("input[type=radio]").get(0).checked="checked";
                    }else {
                        $("input[type=radio]").get(1).checked="checked";
                    }
                }
            }
        });
    };
    //查询所有服务
    function getData() {
        $.ajax({
            url:"/queryAllServiceType",
            type:"post",
            dataType:"json",
            async:false,
            success:function (data) {
                if(data){
                    for(var i=0;data.length;i++){
                        var d=data[i];
                        $("select").append("<option value='"+d.servicetypeid+"'>"+d.servicetypename+"</option>");
                    }
                }
            }
        });
    };
</script>
</html>